<template>
  <div class="appoint-item" @click="toCourseDetail($event)">
      <div class="appoint-img" v-bind:style="{backgroundImage:'url('+thumb+')'}"></div>
      <div class="appoint-content" v-bind:class="{ width_button: checkin>0 }">
          <div class="appoint-name">{{name}}</div>
          <div class="appoint-desc">{{desc}}</div>
          <span class="appoint-detail">
              <p class="appoint-time">{{date}}&nbsp;{{start}}-{{end}}</p>
          </span>
      </div>
      <div class="appoint-appoint" slot="footer" v-if="checkin>0">
          <van-button @click="cancel" class="appoint-button" size="mini">{{button_text}}</van-button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'appoint-item-person',
  comments: 'appoint-item-person',
  props: {
    id: Number,
    course_id: Number,
    status: Number,
    thumb: String,
    name: String,
    desc: String,
    date: String,
    start: String,
    end: String,
    checkin: Number
  },
  data () {
    return {
      button_text: '取消'
    }
  },
  methods: {
    cancel: function (e) {
      var that = this
      if (e.target.tagName === 'BUTTON') {
        this.$dialog.confirm({
          title: '提示',
          message: '是否取消预约？'
        }).then(() => {
          this.$axios.put('/users/' + JSON.parse(localStorage.getItem('user')).id + '/appointments/' + this.id
          ).then(response => {
            that.$emit('onRefresh', that.status)
          })
        })
      }
    },
    // 进入课程详细
    toCourseDetail: function (e) {
      var that = this
      if (e.target.tagName !== 'BUTTON') {
        if (this.enabled) {
          this.$router.push({
            name: 'course_detail',
            params: {
              course_id: that.appointId
            }
          })
        }
      }
    }
  }
}
</script>
<style lang="postcss" scoped>
.appoint-item{
    height: 100px;
    width: 100%;
    background-color: #333;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 4px;
}
.appoint-img{
    height: 80px;
    width: 80px;
    position: absolute;
    border-radius: 50%;
    background-size: 100%;
    left: 5px;
    top: 10%;
}
.appoint-content{
    position: absolute;
    top: 0px;
    left: 90px;
    text-align: left;
    height: 100%;
    width: 50%;
    color: #f8f8f8;
}
.width_button{
  width: 65%;
}
.appoint-name{
    margin-top: 10px;
    font-size: 1rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.appoint-desc{
    font-size: 0.8rem;
    text-align: left;
    margin-top: 0px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.appoint-detail{
    display: block;
    font-size: 0.8rem;
}
.appoint-time{
    color:yellow;
    margin: 0px;
    font-size: 0.8rem;
}
.appoint-appoint{
    position: absolute;
    right: 8px;
    bottom: 42%;
    color: yellow;
}
.appoint-button{
    color: #fff;
    background-color: #333;
    border: 1px solid #f8f8f8;
}
.course-time{
    color:yellow;
}
</style>
